<template>
    <div>
      <el-page-header :icon="ArrowLeft">
        <template #title @click="back">
          <span @click="back">返回</span>
        </template>
        <template #content>
          <span class="fs-14"> 诊所管理 </span>
          <el-icon style="vertical-align: -3px;">
            <Right />
          </el-icon>
  
          <span class="fs-14 cr-blue"> 医生信息 </span>
        </template>
      </el-page-header>
  
      <!-- 查询表单 -->
      <el-form :inline="true" :model="formInline" class="mt-12  pad-12">
        <el-form-item label="医生姓名" class="mb-0">
          <el-input v-model="formInline.user" placeholder="请输入医生姓名" />
        </el-form-item>
        <el-form-item label="医生职称" class="mb-0">
          <el-input v-model="formInline.region" placeholder="请输入医生职称" />
        </el-form-item>
        <el-form-item label="就职诊所" class="mb-0">
          <el-input v-model="formInline.adrs" placeholder="请输入就职诊所" />
        </el-form-item>
        
        <el-form-item class="mb-0">
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
  
  
      <!-- 新增按钮 -->
      <el-button type="danger" size="default" :icon="Plus" class="mt-12" @click="navigateTo('/clinic/add2')">新增医生</el-button>
  
      <!-- 医院表格 -->
      <el-table :data="tableData" border style="width: 100%" class="mt-12">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="potato" label="医生照片" width="120" >
          <el-image style="width: 100px; height: 100px;border-radius: 50%;" :src="url" fit="cover" />
        </el-table-column>
        <el-table-column prop="dname" label="医生姓名" width="100"/>
        <el-table-column prop="caddress" label="任职诊所" />
        <el-table-column prop="jontitle" label="医生职称" />
        <el-table-column prop="excel" label="医生擅长" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="navigateTo(`/clinic/edit2?id=${scope.row.id}`)">修改</el-button>
  
            <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
              title="是否确定删除?" @confirm="handelDelete(scope.row.id)">
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
  
  
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页器 -->
      <div class="float-r mt-12">
        <el-pagination layout="prev, pager, next" :total="100" />
      </div>
  
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, onUnmounted, computed, watch, HtmlHTMLAttributes } from 'vue'
  import { ArrowLeft, Right, Plus, InfoFilled } from '@element-plus/icons-vue'
  
  import { reactive, } from 'vue'
  import { ElMessage } from 'element-plus'
  
  // 导入接口
  import { doctorinfo, doctordel } from '../api';
  
  import { useNavigate } from '../hooks'
  
  // import Add1View from './Add1View.vue';
  
  const value1 = ref('')
  
  const formInline = reactive({
    user: '',
    region: '',
    adrs:''
  })
  
  const onSubmit = () => {
    console.log('submit!')
  }
  
  interface DoctorInfo {
    id: string;
    potato: string[];
    dname: string;
    caddress: string;
    jontitle: string;
    excel:string
  }
  
  const tableData = ref()
  const url=ref([])
  
  // 在生命周期中请求接口，获得数据，展示表格
  onMounted(async () => {
    const res = await doctorinfo({})

    
    tableData.value = res;
    console.log(res);
  tableData.value.forEach(item => {
      url.value[0]= item.potato[0]
    });
    console.log(url.value);
    
  })
  
  
  const navigator = useNavigate()
  const navigateTo = (url: string) => {
    navigator.navigateTo(url)
  }
  const back = function () {
    navigator.back()
  }
  
  
  // 删除
  const handelDelete = async (id: any) => {
  
    // 先判断是否确定删除
    await doctordel({ id })
    ElMessage({
      message: '删除成功！',
      type: 'success'
    })
  
    const res = await doctorinfo({})
    tableData.value = res;
  
  }
  
  // 修改
  // const handleClick = async ()
  
  </script>
  
  <style scoped lang="scss"></style>